<template>
	<div class="mainus_pe">
		<div v-if="!is_edit">
			<span> {{ number_data }}</span>
			<svg
				aria-hidden="true"
				class="main_page_svg"
				@click="handleEdit"
				width="13"
				height="13"
			>
				<use xlink:href="#icon-commodity_modify" />
			</svg>
		</div>
		<div v-if="is_edit" class="boxnr">
			<el-input-number
				v-model.trim="number_data"
				placeholder="采购价"
				:controls="false"
				class="wid80"
				:precision="precision"
				:max="max"
				@blur="handleSave"
				@keyup.native.enter="handleSave"
			></el-input-number>
			<div class="boxnr svg_box">
				<svg
					aria-hidden="true"
					class="main_page_svg marginLeft5"
					@click="handleSave"
					width="20"
					height="20"
				>
					<use xlink:href="#icon-index_tick" />
				</svg>
				<svg
					aria-hidden="true"
					class="main_page_svg marginLeft5"
					@click="handleCancel"
					width="12"
					height="12"
				>
					<use xlink:href="#icon-index_cross" />
				</svg>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			number: {
				type: Number | String,
			},
			is_standard: {
				type: Number | String,
			},
			max: {
				type: Number,
				default: Infinity,
			},
		},
		data() {
			return {
				number_data: null,
				old_val: "",
				is_edit: false,
			};
		},
		watch: {
			number: {
				handler(val, oldval) {
					this.number_data = parseFloat(val);
					this.old_val = parseFloat(val);
				},
				deep: true,
				immediate: true,
			},
		},
		computed: {
			precision() {
				let precision = 2;
				if (this.is_standard !== "undefind") {
					precision = this.is_standard == 1 ? 0 : 2;
				}
				return precision;
			},
		},
		methods: {
			handleEdit(val) {
				this.is_edit = true;
			},
			handleSave() {
				let val = this.number_data;
				if (/^(\d+\.?)?\d{0,2}$/.test(parseFloat(val)) && val != "") {
					this.is_edit = false;
					this.send_data();
				} else {
					this.$message.error("请输入数字");
				}
			},
			handleCancel() {
				this.is_edit = false;
				this.number_data = this.old_val;
				this.send_data();
			},
			send_data() {
				this.$emit("update:number", this.number_data);
			},
		},
	};
</script>
<style lang='scss' scoped>
.svg_box {
	display: flex;
	flex-direction: column;
	transform: translateY(-2px);
}
/deep/.el-input-number .el-input__inner {
	text-align: left;
}
</style>
